import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType, filter } from 'graphql-anywhere';
import { View, StyleSheet, ScrollView } from 'react-native';
import { List } from 'react-native-elements'
import CreditCardListItem from './CreditCardListItem';
import Loader from '../widgets/Loader';
import EmptyView from '../widgets/EmptyView';
import InfiniteList from '../widgets/InfiniteList';
import { loadMoreData } from '../utils';

class CreditCardList extends Component {
  renderItem = ({item}) => {
    return <CreditCardListItem selectMode={this.props.selectMode} select={this.props.select}
      onSelect={this.props.onSelect} card={filter(CreditCardListItem.fragments.card, item)}
      chinese={this.props.chinese}/>;
  }
  render() {
    const { creditCards, loading, refetch, fetchMore } = this.props;

    return <InfiniteList hideEmpty={this.props.hideEmpty} hideFooter={this.props.hideFooter} chinese={this.props.chinese} extraData={{select: this.props.select}} top datas={creditCards}
      loading={loading} refetch={refetch} fetchMore={fetchMore} renderItem={this.renderItem}/>;
  }
}

CreditCardList.propTypes = {
  select: PropTypes.string,
  onSelect: PropTypes.func
};

export default graphql(gql`
  query CreditCardList($userId:String) {
    creditCards(userId:$userId) {
      ...CreditCardListItem
    }
  }
  ${CreditCardListItem.fragments.card}
`, {
  options: ({userId}) => {
    return {
      variables: {
        userId
      }
    };
  },
  props: ({ownProps, data:{creditCards, refetch, fetchMore, loading}}) => {
    return {
      creditCards,
      loading,
      refetch,
      fetchMore: () => loadMoreData(fetchMore, creditCards, 'creditCards')
    };
  }
})(CreditCardList);
